<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
      <div class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-8 py-10 pt-32 relative z-10">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl font-bold mb-6 text-gray-900">机构合作</h1>
        <p class="text-xl text-gray-600 max-w-4xl mx-auto">
          携手共创教育未来！我们期待与各类教育机构建立深度合作关系，共同为学习者提供优质的教育服务。
        </p>
      </div>

      <!-- 合作优势 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-3xl"><Connection /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">技术优势</h3>
          <p class="text-gray-600 leading-relaxed">
            先进的直播技术、稳定的平台架构、丰富的互动功能，为您的教学提供强有力的技术支撑。
          </p>
        </div>
        
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-3xl"><TrendCharts /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">市场优势</h3>
          <p class="text-gray-600 leading-relaxed">
            庞大的用户群体、精准的市场定位、完善的营销体系，助力您的业务快速拓展。
          </p>
        </div>
        
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-3xl"><Service /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">服务优势</h3>
          <p class="text-gray-600 leading-relaxed">
            专业的客户服务、灵活的定制方案、持续的技术支持，确保合作顺利进行。
          </p>
        </div>
      </div>

      <!-- 合作模式 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">合作模式</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="space-y-6">
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <span class="text-blue-600 font-bold text-xl">1</span>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900 mb-2">内容合作</h4>
                <p class="text-gray-600">共享优质课程内容，扩大教学资源库，提升教学质量。</p>
              </div>
            </div>
            
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <span class="text-green-600 font-bold text-xl">2</span>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900 mb-2">技术合作</h4>
                <p class="text-gray-600">提供定制化技术解决方案，满足特殊教学需求。</p>
              </div>
            </div>
            
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <span class="text-purple-600 font-bold text-xl">3</span>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900 mb-2">渠道合作</h4>
                <p class="text-gray-600">共同开拓市场，共享客户资源，实现互利共赢。</p>
              </div>
            </div>
          </div>
          
          <div class="space-y-6">
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <span class="text-orange-600 font-bold text-xl">4</span>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900 mb-2">品牌合作</h4>
                <p class="text-gray-600">联合品牌推广，提升品牌知名度和影响力。</p>
              </div>
            </div>
            
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <span class="text-red-600 font-bold text-xl">5</span>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900 mb-2">研发合作</h4>
                <p class="text-gray-600">共同研发新产品，探索教育技术前沿。</p>
              </div>
            </div>
            
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <span class="text-indigo-600 font-bold text-xl">6</span>
              </div>
              <div>
                <h4 class="text-xl font-semibold text-gray-900 mb-2">投资合作</h4>
                <p class="text-gray-600">战略投资，深度绑定，共同成长。</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 合作流程 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">合作流程</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div class="text-center">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-blue-600 text-2xl"><ChatDotRound /></el-icon>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">初步沟通</h4>
            <p class="text-gray-600 text-sm">了解需求，确定合作意向</p>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-green-600 text-2xl"><Document /></el-icon>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">方案制定</h4>
            <p class="text-gray-600 text-sm">制定详细合作方案</p>
          </div>
          
          <div class="text-center">
                          <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <el-icon class="text-purple-600 text-2xl"><Document /></el-icon>
              </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">签署协议</h4>
            <p class="text-gray-600 text-sm">正式签署合作协议</p>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-orange-600 text-2xl"><Promotion /></el-icon>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">开始合作</h4>
            <p class="text-gray-600 text-sm">启动合作项目</p>
          </div>
        </div>
      </div>

      <!-- 联系我们 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">联系我们</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <h4 class="text-xl font-semibold text-gray-900 mb-4">合作咨询</h4>
            <div class="space-y-4">
              <div class="flex items-center gap-3">
                <el-icon class="text-blue-600"><Phone /></el-icon>
                <span class="text-gray-700">400-123-4567</span>
              </div>
              <div class="flex items-center gap-3">
                <el-icon class="text-blue-600"><Message /></el-icon>
                <span class="text-gray-700">partnership@edulivelink.com</span>
              </div>
              <div class="flex items-center gap-3">
                <el-icon class="text-blue-600"><Location /></el-icon>
                <span class="text-gray-700">北京市朝阳区科技园区</span>
              </div>
            </div>
          </div>
          
          <div>
            <h4 class="text-xl font-semibold text-gray-900 mb-4">合作表单</h4>
            <form @submit.prevent="submitPartnership" class="space-y-4">
              <input 
                v-model="partnershipForm.name"
                type="text" 
                placeholder="机构名称"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
              <input 
                v-model="partnershipForm.contact"
                type="text" 
                placeholder="联系人"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
              <input 
                v-model="partnershipForm.phone"
                type="tel" 
                placeholder="联系电话"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
              <textarea 
                v-model="partnershipForm.message"
                placeholder="合作意向描述"
                rows="3"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none resize-none"
                required
              ></textarea>
              <button 
                type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition-colors"
              >
                提交合作意向
              </button>
            </form>
          </div>
        </div>
      </div>

      <!-- 成功案例 -->
      <div class="text-center">
        <h3 class="text-3xl font-bold text-gray-900 mb-8">成功案例</h3>
        <p class="text-gray-600 mb-6">我们已与多家知名教育机构建立了良好的合作关系</p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
            <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
              <span class="text-gray-600 font-bold text-lg">A机构</span>
            </div>
            <p class="text-sm text-gray-600">在线教育平台</p>
          </div>
          <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
            <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
              <span class="text-gray-600 font-bold text-lg">B学院</span>
            </div>
            <p class="text-sm text-gray-600">高等院校</p>
          </div>
          <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
            <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
              <span class="text-gray-600 font-bold text-lg">C培训</span>
            </div>
            <p class="text-sm text-gray-600">职业培训机构</p>
          </div>
          <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
            <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
              <span class="text-gray-600 font-bold text-lg">D教育</span>
            </div>
            <p class="text-sm text-gray-600">K12教育机构</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Connection, TrendCharts, Service, ChatDotRound, Document, Promotion, Phone, Message, Location } from '@element-plus/icons-vue'

const partnershipForm = reactive({
  name: '',
  contact: '',
  phone: '',
  message: ''
})

const submitPartnership = () => {
  if (!partnershipForm.name || !partnershipForm.contact || !partnershipForm.phone || !partnershipForm.message) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  ElMessage.success('感谢您的合作意向！我们会尽快与您联系。')
  
  // 重置表单
  partnershipForm.name = ''
  partnershipForm.contact = ''
  partnershipForm.phone = ''
  partnershipForm.message = ''
}
</script>

<style scoped>
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>
